<template>
	<view class="reportForm_M">
		<tabbar currentText="报表">
			<view class="manager_header">
				<view>
					<!--顶部导航栏-->
					<!-- <view class="uni-tab-bar">
						<scroll-view scroll-x class="uni-swiper-tab">
							<block v-for="(tabBar, index) in tabBars" :key="index">
								<view class="swiper-tab-list" style="width: 60rpx;" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
									{{ tabBar.name }}
									<view class="swiper-tab-line"></view>
								</view>
							</block>
						</scroll-view>
					</view> -->
					<view style="height: 20rpx;background:#f5f6fa"></view>
					<!--内容区-->
					<!-- <swiper :current="tabIndex" @change="tabChange" style="height: 1500rpx;"> -->
					<swiper style="height: 1620rpx;">
						<swiper-item @touchmove.stop>
							<!-- 线索量 -->
							<view class="clueQuantity">
								<view class="clueQuantity_list">
									<view class="all_total clue">
										<!-- <view class="spot"></view> -->
										<view class="number">{{ reportFormList.clueCount || 0 }}</view>
										<view class="all_number_title">线索总量</view>
									</view>

									<view class="progress_total clue">
										<!-- <view class="spot"></view> -->

										<view class="number">{{ reportFormList.followCount || 0 }}</view>
										<view class="all_number_title">跟进总量</view>
									</view>

									<view class="deal_total clue">
										<!-- <view class="spot"></view> -->

										<view class="number">{{ reportFormList.dealCount || 0 }}</view>
										<view class="all_number_title">成交总量</view>
									</view>

									<view class="defeat_total clue">
										<!-- <view class="spot"></view> -->
										<view class="number">{{ reportFormList.defeatedCount + reportFormList.invalidCount || 0 }}</view>
										<view class="all_number_title">战败无效</view>
									</view>
								</view>

								<view class="clueQuantity_title">线索量</view>

								<!-- 图标一 -->
								<view class="reportFrom_pic">
									<!-- 第一行 -->
									<view class="one" style="display: flex; justify-content: flex-end">
										<text class="one_O">近180天</text>
										<text class="one_W">近30天</text>
										<text class="one_T">近7天</text>
									</view>
									<!-- 第二行 -->
									<view class="two">
										<view class="intentionVal_two_w intentionVal_Num intentionVal_NumBgc1">
											<view class="gradualChange_two gradualChange_bgc1"><view class="intentionVal intentionVal_two_color intentionVal_two_ml">C</view></view>
											<view class="numWidth" style="margin-left: 30rpx;">{{ clueQuantity['C'].num180 }}</view>
											<view class="numWidth">{{ clueQuantity['C'].num30 }}</view>
											<view class="numWidth">{{ clueQuantity['C'].num7 }}</view>
										</view>
									</view>
									<!-- 第三行 -->
									<view class="three">
										<view class="intentionVal_three_w intentionVal_Num intentionVal_NumBgc2">
											<view class="gradualChange_three gradualChange_bgc2">
												<view class="intentionVal intentionVal_three_color intentionVal_three_ml">B</view>
											</view>
											<view class="three_O numWidth">{{ clueQuantity['B'].num180 }}</view>
											<view class="three_W numWidth">{{ clueQuantity['B'].num30 }}</view>
											<view class="three_T numWidth">{{ clueQuantity['B'].num7 }}</view>
										</view>
									</view>
									<!-- 第四行 -->
									<view class="four">
										<view class="intentionVal_four_w intentionVal_Num intentionVal_NumBgc3">
											<view class="gradualChange_four gradualChange_bgc3">
												<view class="intentionVal intentionVal_four_color intentionVal_four_ml important_w">A</view>
											</view>
											<view class="four_O numWidth">{{ clueQuantity['A'].num180 }}</view>
											<view class="four_W numWidth">{{ clueQuantity['A'].num30 }}</view>
											<view class="four_T numWidth">{{ clueQuantity['A'].num7 }}</view>
										</view>
									</view>
									<!-- 第五行 -->
									<view class="five">
										<view class="intentionVal_five_w intentionVal_Num intentionVal_NumBgc4">
											<view class="gradualChange_five gradualChange_bgc4">
												<view class="intentionVal intentionVal_five_color intentionVal_five_ml">H</view>
											</view>
											<view class="five_O numWidth">{{ clueQuantity['H'].num180 }}</view>
											<view class="five_W numWidth">{{ clueQuantity['H'].num30 }}</view>
											<view class="five_T numWidth">{{ clueQuantity['H'].num7 }}</view>
										</view>
									</view>
									<!-- 第六行 -->
									<view class="six">
										<view class="intentionVal_six_w intentionVal_Num intentionVal_NumBgc5">
											<view class="gradualChange_six gradualChange_bgc5"><view class="intentionVal intentionVal_six_color intentionVal_six_ml">O</view></view>
											<view class="six_One numWidth">{{ clueQuantity['O'].num180 }}</view>
											<view class="six_W numWidth">{{ clueQuantity['O'].num30 }}</view>
											<view class="six_T numWidth">{{ clueQuantity['O'].num7 }}</view>
										</view>
									</view>
								</view>
							</view>

							<!-- 线索量变化 -->
							<echartsStackCon :echartsData="stackData"/>
							<!-- 战败量 -->
							<echartsGroupCon :echartsData="groupData" />
						</swiper-item>

						<swiper-item @touchmove.stop>订单</swiper-item>
						<swiper-item @touchmove.stop>排行</swiper-item>
					</swiper>
				</view>
			</view>
		</tabbar>
	</view>
</template>

<script>
import { getSalesManagerOverviewByDept } from '@/service/api/api.js';
import tabbar from '@/components/tabbar/tabbar.vue';
import echartsStackCon from '../components/echartsStackCon.vue';
import echartsGroupCon from '../components/echartsGroupCon.vue';

export default {
	data() {
		return {
			//堆叠柱状图数据线索变化量
			stackData: {
				categories: [],
				series: []
			},
			//柱状图数据战败量
			groupData: {
				categories: [],
				series: []
			},
			tabIndex: 0, //选中标签栏的序列
			reportFormList: {}, //报表数据
			//线索量报表数据
			clueQuantity: {
				C: {
					intentionLevel: 'C',
					num180: 0,
					num30: 0,
					num7: 0
				},
				B: {
					intentionLevel: 'B',
					num180: 0,
					num30: 0,
					num7: 0
				},
				A: {
					intentionLevel: 'A',
					num180: 0,
					num30: 0,
					num7: 0
				},
				H: {
					intentionLevel: 'H',
					num180: 0,
					num30: 0,
					num7: 0
				},
				O: {
					intentionLevel: 'O',
					num180: 0,
					num30: 0,
					num7: 0
				}
			},

			contentList: ['概览', '订单', '排名'],
			tabBars: [
				{
					name: '概览',
					id: '1'
				},
				{
					name: '订单',
					id: '2'
				},
				{
					name: '排名',
					id: '3'
				}
			]
		};
	},
	components: {
		tabbar,
		echartsStackCon,
		echartsGroupCon
	},
	onLoad() {},
	created() {
		this.init();
	},
	methods: {
		async init() {
			let res = await getSalesManagerOverviewByDept({
				deptId: uni.getStorageSync('user_info').userDeptId || ''
			});
			console.log(res);
			if (res.data.code == 0) {
				this.reportFormList = res.data.data;
				//线索量报表数据  处理
				// console.log(res.data.data.reportIntentionLevels,"++++++++++++++++")
				res.data.data.reportIntentionLevels.forEach((v, i) => {
					if (v.intentionLevel == 'C') {
						switch (v.archivingCycle) {
							case '180':
								console.log(v.clueCount, 'v.clueCountv.clueCount');
								this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
								break;
							case '30':
								this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
								break;
							case '7':
								this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
								break;
						}
					}
					if (v.intentionLevel == 'B') {
						switch (v.archivingCycle) {
							case '180':
								this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
								break;
							case '30':
								this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
								break;
							case '7':
								this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
								break;
						}
					}
					if (v.intentionLevel == 'A') {
						switch (v.archivingCycle) {
							case '180':
								this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
								break;
							case '30':
								this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
								break;
							case '7':
								this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
								break;
						}
					}
					if (v.intentionLevel == 'H') {
						switch (v.archivingCycle) {
							case '180':
								this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
								break;
							case '30':
								this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
								break;
							case '7':
								this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
								break;
						}
					}
					if (v.intentionLevel == 'O') {
						switch (v.archivingCycle) {
							case '180':
								this.clueQuantity[v.intentionLevel].num180 = v.clueCount || 0;
								break;
							case '30':
								this.clueQuantity[v.intentionLevel].num30 = v.clueCount || 0;
								break;
							case '7':
								this.clueQuantity[v.intentionLevel].num7 = v.clueCount || 0;
								break;
						}
					}
				});

				console.log(this.clueQuantity, 'this.clueQuantitythis.clueQuantity');
				//线索量变化
				let curDays = [];
				let dataObj = {};
				res.data.data.reportChanges.forEach((v, i) => {
					if (v.archivingCycle == 7) {
						if (v.curDay) {
							var curDay = v.curDay.split('-')[1] + '/' + v.curDay.split('-')[2];
							curDays.push(curDay);
							//去重
							// curDays = Array.from(new Set(curDays));
							curDays = [...new Set(curDays)];
						}
						if (Object.keys(dataObj).indexOf(v.intentionLevel) == -1) {
							dataObj[v.intentionLevel] = [v.clueCount];
						} else {
							dataObj[v.intentionLevel].push(v.clueCount);
						}
					}
				});
				let seriesArr = [];
				// 颜色配置
				let stackDataColor = {
					O: '#FD5757',
					H: '#FECD2F',
					A: '#7CDEBC',
					B: '#3CB3D0',
					C: '#5D9BFC'
				};
				Object.keys(dataObj).forEach(item => {
					// 规范数据格式  固定长度
					let arrdataObj = new Array(curDays.length).fill(0);
					for (let key in dataObj[item]) {
						if (key < curDays.length) {
							arrdataObj.splice(key, 1, dataObj[item][key]);
						}
					}
					seriesArr.push({
						name: item + '级',
						data: arrdataObj,
						type: 'bar',
						stack: 'stackone',
						itemStyle: {
							normal: {
								color: stackDataColor[item]
								// barBorderRadius: [10, 10, 10, 10],
							}
						},
						barWidth: 20
					});
				});
				this.stackData['categories'] = curDays;
				this.stackData['series'] = seriesArr;
				// 战败 数据处理 reportDefeateds
				res.data.data.reportDefeateds.forEach((v, i) => {
					if (v.curDay) {
						var curDay = v.curDay.split('-')[1] + '/' + v.curDay.split('-')[2];
						this.groupData.categories.push(curDay);
						this.groupData.categories = Array.from(new Set(this.groupData.categories));
					}
					this.groupData.series.push(v.defeatedCount);
				});
			} else {
				uni.showToast({
					title: res.data.errMsg
				});
			}
		},
		getServerData() {
			_self.serverData = this.chartData.data;
			let ColumnStack = {
				categories: [],
				series: []
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			ColumnStack.categories = this.categoriesClue;
			// console.log(ColumnStack.categories)
			ColumnStack.series = this.seriesClue;
			// console.log(ColumnStack.series)
			_self.showColumnStack('canvasColumnStack', ColumnStack);
		},
		getServerData1() {
			//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
			// _self.serverData=this.chartData.data.data;
			let Column = {
				categories: [],
				series: []
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			Column.categories = this.categories;
			Column.series = this.series;
			_self.showColumn('canvasColumn', Column);
		},

		showColumnStack(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				legend: {
					show: true,
					position: 'top',
					float: 'right'
				},
				fontSize: 7,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				colors: ['#E26131', '#D8AA2B', '#69C893', '#75B9CC', '#5A92DB'],

				xAxis: {
					disableGrid: true
				},
				yAxis: {
					// disabled: true,
					min: 0
				},
				dataLabel: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				padding: [15, 15, 4, 15],
				extra: {
					column: {
						type: 'stack',
						width: (_self.cWidth * _self.pixelRatio * 0.5) / chartData.categories.length
					}
				}
			});
		},
		showColumn(canvasId, chartData) {
			canvaColumn1 = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				legend: {
					show: false
				},
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					disableGrid: true,
					type: 'grid',
					gridType: 'dash',
					dashLength: 8,
					format: val => {
						return Math.round(val.toFixed(2));
					}
				},
				dataLabel: true,
				width: _self.cWidth1 * _self.pixelRatio1,
				height: _self.cHeight1 * _self.pixelRatio1,
				padding: [15, 15, 4, 15],
				extra: {
					column: {
						type: 'group',
						width: (_self.cWidth1 * _self.pixelRatio1 * 0.45) / chartData.categories.length
					}
				}
			});
		},

		touchColumn(e) {
			let i = 0;
			let num = 0;
			let textList = [];
			canvaColumn.showToolTip(e, {
				textList: textList,
				format: (item, category) => {
					i++;
					num += item.data;
					textList.push({ text: item.name + ':' + item.data, color: item.color });
					if (i == this.seriesClue.length) {
						textList.push({ text: '总和:' + num });
					}
				}
			});
		},
		touchColumntow(e) {
			canvaColumn1.showToolTip(e, {
				format: function(item, category) {
					if (typeof item.data === 'object') {
						return item.name + ':' + item.data.value;
					} else {
						return item.name + ':' + item.data;
					}
				}
			});
		},
		toggleTab(index) {
			// this.tabIndex = index;
			this.tabIndex = 0;
		},
		//滑动切换swiper
		tabChange(e) {
			const tabIndex = e.detail.current;
			this.tabIndex = tabIndex;
		}
	}
};
</script>

<style scoped lang="scss">
.qiun-charts {
	width: 700upx;
	height: 350upx;
	background-color: #ffffff;
}

.charts {
	width: 700upx;
	height: 390upx;
	background-color: #ffffff;
}

.swiper-tab-list {
	color: #969696;
	width: 244rpx;
	font-size: 26rpx;
}

.uni-tab-bar .active {
	color: #3b86ff;
	font-weight: normal;
}

/deep/ .uni-scroll-view-content {
	display: flex !important;
	align-items: center !important;
	justify-content: space-around !important;
}
.swiper-tab-line {
	margin-top: -14rpx;
}
.active .swiper-tab-line {
	width: 40rpx;
	border: 4rpx solid #007aff;
	margin-left: 10rpx;
	border-radius: 4rpx;
	margin-top: -14rpx;
}

.uni-swiper-tab {
	border-bottom: 12upx solid #f5f6fa;
}

.manager_header {
	width: 100%;
}

.reportForm_menu {
	width: 100%;
	height: 84rpx;
	line-height: 84rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;

	.generalization_border {
		width: 250rpx;
		border-bottom: 2rpx solid #3b86ff;
	}

	.generalization {
		font-size: 26rpx;
		color: #007aff;
		display: flex;
		justify-content: center;
	}
}

.order,
.ranking {
	width: 150rpx;
	display: flex;
	justify-content: center;
}

.clueQuantity {
	width: 100%;
	background-color: #ffffff;

	.clueQuantity_list {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.clueQuantity_title {
		height: 80rpx;
		background: #f5f6fa;
		// -webkit-box-shadow:0px 4rpx 4rpx #c8c8c8 inset;
		// -moz-box-shadow:0px 4rpx 4rpx #c8c8c8 inset;
		// box-shadow:0px 4rpx 4rpx #c8c8c8 inset;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #43425d;
		font-family: Source Han Sans CN;
		font-weight: 500;
		padding-left: 30rpx;
	}
}

.all_total {
	width: 180rpx;
	text-align: center;
	border-right: 2rpx solid #f0f0f7;
}

.deal_total {
	width: 180rpx;
	text-align: center;
	border-right: 2rpx solid #f0f0f7;
}

.progress_total {
	width: 180rpx;
	border-right: 2rpx solid #f0f0f7;
	text-align: center;
}

.defeat_total {
	width: 180rpx;
	text-align: center;
}

.clue {
	// .spot {
	// 	width: 12rpx;
	// 	height: 12rpx;
	// 	background-color: #6da5ff;
	// 	border-radius: 50%;
	// 	margin: 15rpx 15rpx 0 0;
	// }

	.all_number_title {
		font-size: 28rpx;
		color: #43425d;
	}

	.number {
		font-size: 28rpx;
		font-weight: bold;
		// padding-left: 15rpx;
	}
}

.reportFrom_pic {
	width: 690rpx;
	height: 288rpx;
	margin: 28rpx 0 28rpx 30rpx;

	.one {
		height: 46rpx;
		line-height: 46rpx;
		// background-color: #f6f7fa;

		.one_O {
			margin-left: 330rpx;
			font-size: 20rpx;
		}

		.one_W {
			margin-left: 40rpx;
			font-size: 20rpx;
		}

		.one_T {
			margin-left: 55rpx;
			margin-right: 35rpx;
			font-size: 20rpx;
		}
	}

	.intentionVal {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bolder;
		text-align: center;
	}

	.intentionVal_Num {
		height: 40rpx;

		view {
			font-size: 20rpx;
		}
	}
	.intentionVal_NumBgc1 {
		background-color: rgba($color: #65a0fc, $alpha: 0.3);
	}
	.intentionVal_NumBgc2 {
		background-color: rgba($color: #63d4ed, $alpha: 0.3);
	}
	.intentionVal_NumBgc3 {
		background-color: rgba($color: #82dfbf, $alpha: 0.3);
	}
	.intentionVal_NumBgc4 {
		background-color: rgba($color: #f5d569, $alpha: 0.3);
	}
	.intentionVal_NumBgc5 {
		background-color: rgba($color: #fd5c5c, $alpha: 0.3);
	}
	.numWidth {
		width: 60rpx;
		// background-color: #ccc;
		text-align: center;
	}
	.two {
		height: 40rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.intentionVal_two_color {
			color: #5a92db;
		}

		.intentionVal_two_w {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding-right: 36rpx;
		}
	}

	.three {
		height: 40rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.intentionVal_three_color {
			color: #75b9cc;
		}

		.intentionVal_three_w {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding-right: 36rpx;
		}

		.three_O {
			margin-left: -40rpx;
		}
	}

	.four {
		height: 40rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.intentionVal_four_color {
			color: #69c893;
		}

		.intentionVal_four_w {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding-right: 36rpx;
		}

		.four_O {
			margin-left: 48rpx;
		}

		.important_w {
			width: 46rpx !important;
		}
	}

	.five {
		height: 40rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.intentionVal_five_color {
			color: #d8aa2b;
		}

		.intentionVal_five_w {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding-right: 36rpx;
		}

		.five_O {
			margin-left: 86rpx;
		}
	}

	.six {
		height: 40rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.intentionVal_six_color {
			color: #e26131;
		}

		.intentionVal_six_w {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding-right: 36rpx;
		}

		.six_One {
			margin-left: 124rpx;
		}
	}

	.gradualChange_bgc1 {
		background: linear-gradient(90deg, #f0f4fc 0%, #5d9bff 100%) !important;
		border-radius: 20rpx;
	}
	.gradualChange_bgc2 {
		background: linear-gradient(90deg, #f0fcfb 0%, #3cb3d0 100%);
		border-radius: 20rpx;
	}
	.gradualChange_bgc3 {
		background: linear-gradient(90deg, #f0f4fc 0%, #7cdebc 100%);
		border-radius: 20rpx;
	}
	.gradualChange_bgc4 {
		background: linear-gradient(90deg, #f0f4fc 0%, #f5d568 100%);
		border-radius: 20rpx;
	}
	.gradualChange_bgc5 {
		background: linear-gradient(90deg, #f0f4fc 0%, #ff5757 100%);
		border-radius: 20rpx;
	}

	.gradualChange_two {
		width: 262rpx;
		height: 40rpx;
		border-radius: 20rpx;
	}

	.gradualChange_three {
		width: 332rpx;
		height: 40rpx;
	}

	.gradualChange_four {
		width: 240rpx;
		height: 40rpx;
	}

	.gradualChange_five {
		width: 200rpx;
		height: 40rpx;
	}

	.gradualChange_six {
		width: 160rpx;
		height: 40rpx;
	}
}

.clueQuantity_change {
	width: 100%;
	height: 420rpx;
	background-color: #ffffff;
}

.clueQuantity_change_title {
	font-size: 32rpx;
	color: #43425d;
	padding-left: 30rpx;
	background-color: #f5f6fa;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-weight: 500;
}

.amountDefeat {
	width: 100%;
	height: 428rpx;
	background-color: #ffffff;
	border-top: 12rpx solid #f5f6fa;
}

.clueQuantity_change_type {
	display: flex;
	margin-right: 20rpx;
	justify-content: flex-end;
}

.change_one {
	display: flex;
	margin-right: 40rpx;

	.change_model {
		width: 42rpx;
		height: 12rpx;
		background-color: #e26131;
		margin-top: 10rpx;
		margin-right: 8rpx;
	}

	text {
		font-size: 12rpx;
		font-weight: 400;
		color: #43425d;
	}
}

.change_two {
	display: flex;
	margin-right: 40rpx;

	.change_model_two {
		width: 42rpx;
		height: 12rpx;
		background-color: #d8aa2b;
		margin-top: 10rpx;
		margin-right: 8rpx;
	}

	text {
		font-size: 12rpx;
		font-weight: 400;
		color: #43425d;
	}
}

.change_three {
	display: flex;
	margin-right: 40rpx;

	.change_model_three {
		width: 42rpx;
		height: 12rpx;
		background-color: #69c893;
		margin-top: 10rpx;
		margin-right: 8rpx;
	}

	text {
		font-size: 12rpx;
		font-weight: 400;
		color: #43425d;
	}
}

.change_four {
	display: flex;
	margin-right: 30rpx;

	.change_model_four {
		width: 42rpx;
		height: 12rpx;
		background-color: #75b9cc;
		margin-top: 10rpx;
		margin-right: 8rpx;
	}

	text {
		font-size: 12rpx;
		font-weight: 400;
		color: #43425d;
	}
}

.change_five {
	display: flex;

	.change_model_five {
		width: 42rpx;
		height: 12rpx;
		background-color: #5a92db;
		margin-top: 10rpx;
		margin-right: 8rpx;
	}

	text {
		font-size: 12rpx;
		font-weight: 400;
		color: #43425d;
	}
}

.amountDefeat_title {
	font-size: 32rpx;
	color: #43425d;
	padding: 30rpx 0 38rpx 30rpx;
}
</style>
